/**
 * Copyright (c) 2006, Mark Allen. All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice, this
 * list of conditions and the following disclaimer.
 * 
 * Redistributions in binary form must reproduce the above copyright notice,
 * this list of conditions and the following disclaimer in the documentation
 * and/or other materials provided with the distribution.
 * 
 * Neither the name of Achewood Tags nor the names of its contributors may be
 * used to endorse or promote products derived from this software without
 * specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
 * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 * POSSIBILITY OF SUCH DAMAGE.
 */
 
 
 
/**
 * Builds a DOM element that holds an Achewood strip.
 */
function StripContainer(strip, imageBaseUrl) {
	this.strip = strip;
	this.imageBaseUrl = imageBaseUrl;
	this.stripContainerDiv = document.createElement("div");
	this.detailDiv = document.createElement("div");	
	var that = this;
	var thumbnailIsDisplayed = true;
	
	this.getStrip = function() {
		return that.strip;
	}
	
	this.showDetail = function(detailElement) {
		Element.hide(that.detailDiv);
		removeAllChildren(that.detailDiv);
		that.detailDiv.appendChild(detailElement);
		Element.show(that.detailDiv);	
	}
	
	this.build = function() {
		var titleHeader = document.createElement("h1");
		titleHeader.setAttribute("class", "centered");
		titleHeader.setAttribute("className", "centered");		
		titleHeader.appendChild(document.createTextNode(that.strip.title));

		var dateHeader = document.createElement("h2");
		dateHeader.setAttribute("class", "centered");
		dateHeader.setAttribute("className", "centered");		
		dateHeader.appendChild(document.createTextNode(that.strip.dateAsString));		
		
		var stripImg = document.createElement("img");
		stripImg.setAttribute("src", imageBaseUrl + "?imageId=" + strip.thumbnailImage.id);
		
		var stripLink = document.createElement("a");
		stripLink.setAttribute("href", "javascript://");
		stripLink.setAttribute("title", strip.title);
		stripLink.appendChild(stripImg);
		stripLink.onclick = function() {
			if(thumbnailIsDisplayed) {
				stripImg.setAttribute("src", imageBaseUrl + "?imageId=" + strip.stripImage.id);
			} else {
				stripImg.setAttribute("src", imageBaseUrl + "?imageId=" + strip.thumbnailImage.id);
			}
			
			thumbnailIsDisplayed = !thumbnailIsDisplayed;
		};
		
				
		var altTextParagraph = document.createElement("p");
		altTextParagraph.setAttribute("class", "alt-text centered");
		altTextParagraph.setAttribute("className", "alt-text centered");
		altTextParagraph.appendChild(document.createTextNode(that.strip.altText));
		
		var commentsLink = document.createElement("a");
		commentsLink.setAttribute("href", "javascript://");
		commentsLink.appendChild(document.createTextNode("Comments"));		
		commentsLink.onclick = function() { that.showDetail(new CommentsContainer(that.strip).build()); };

		var transcriptLink = document.createElement("a");
		transcriptLink.setAttribute("href", "javascript://");
		transcriptLink.appendChild(document.createTextNode("Transcript"));	
		transcriptLink.onclick = function() { that.showDetail(new TranscriptContainer(that.strip).build()); };
				
		var actionsSpan = document.createElement("span");
		actionsSpan.appendChild(commentsLink);
		actionsSpan.appendChild(buildSmallHorizontalSpacer());
		actionsSpan.appendChild(transcriptLink);		
		
		this.detailDiv.setAttribute("style", "display: none;");

		this.stripContainerDiv.setAttribute("class", "strip-container centered");
		this.stripContainerDiv.setAttribute("className", "strip-container centered");		
		this.stripContainerDiv.appendChild(titleHeader);
		this.stripContainerDiv.appendChild(dateHeader);						
		this.stripContainerDiv.appendChild(stripLink);
		this.stripContainerDiv.appendChild(altTextParagraph);
		this.stripContainerDiv.appendChild(actionsSpan);		
		this.stripContainerDiv.appendChild(this.detailDiv);	
			
		return this.stripContainerDiv;
	}
}

function CommentsContainer(strip) {
	this.strip = strip;
	this.commentsDiv = document.createElement("div");
	this.addCommentTextArea = document.createElement("textarea");
	var that = this;

	this.loadComments = function() {
		DwrStripService.findStripCommentsByStrip(that.strip.id, function(stripComments) {
			removeAllChildren(that.commentsDiv);

			if(stripComments.length == 0) {
				var noCommentsDiv = document.createElement("div");
				noCommentsDiv.setAttribute("class", "no-comments");
				noCommentsDiv.setAttribute("className", "no-comments");
				noCommentsDiv.appendChild(document.createTextNode("This strip hasn't been commented on yet."));
				that.commentsDiv.appendChild(noCommentsDiv);
			}

			for(var i = 0; i < stripComments.length; i++) {				
				var commentHeader = document.createElement("div");
				commentHeader.setAttribute("class", "comment-header");
				commentHeader.setAttribute("className", "comment-header");
				
				commentHeader.appendChild(document.createTextNode("On "));
				commentHeader.appendChild(document.createTextNode(stripComments[i].dateAsString));
				commentHeader.appendChild(document.createTextNode(", "));
				
				if(stripComments[i].user) {
					commentHeader.appendChild(document.createTextNode(stripComments[i].user.firstName));
					commentHeader.appendChild(document.createTextNode(" "));
					commentHeader.appendChild(document.createTextNode(stripComments[i].user.lastName));
				} else {
					commentHeader.appendChild(document.createTextNode("Anonymous"));
				}

				commentHeader.appendChild(document.createTextNode(" said:"));

				var commentDiv = document.createElement("div");
				commentDiv.setAttribute("class", "comment");
				commentDiv.setAttribute("className", "comment");
				commentDiv.appendChild(commentHeader);							
				appendStringWithNewlines(stripComments[i].comment, commentDiv);									

				that.commentsDiv.appendChild(commentDiv);
			}
		});
	}
	
	this.addComment = function() {
		DwrStripService.createStripComment(that.strip.id, DWRUtil.getValue(this.addCommentTextArea), function(stripComment) {
			that.loadComments();
		});
	}
	
	this.build = function() {
		this.loadComments();
		
		var addCommentButton = document.createElement("input");
		addCommentButton.setAttribute("type", "button");
		addCommentButton.setAttribute("value", "Add Comment");		
		addCommentButton.onclick = function() { that.addComment() };
		
		var addCommentDiv = document.createElement("div");
		addCommentDiv.appendChild(this.addCommentTextArea);
	
		var commentsContainerDiv = document.createElement("div");
		commentsContainerDiv.setAttribute("class", "comments-container");
		commentsContainerDiv.setAttribute("className", "comments-container");
		commentsContainerDiv.appendChild(this.commentsDiv);
		commentsContainerDiv.appendChild(addCommentDiv);
		commentsContainerDiv.appendChild(addCommentButton);
		
		return commentsContainerDiv;
	}
}

function TranscriptContainer(strip) {
	this.strip = strip;
	this.transcriptDiv = document.createElement("div");
	var that = this;

	this.loadTranscript = function() {
		removeAllChildren(that.transcriptDiv);
		
		if(that.strip.transcript && that.strip.transcript.length > 0) {
				var transcriptDiv = document.createElement("div");
				transcriptDiv.setAttribute("class", "comment");
				transcriptDiv.setAttribute("className", "comment");
				appendTranscript(that.strip.transcript, transcriptDiv);
				that.transcriptDiv.appendChild(transcriptDiv);			
		} else {
				var noTranscriptDiv = document.createElement("div");
				noTranscriptDiv.setAttribute("class", "no-comments");
				noTranscriptDiv.setAttribute("className", "no-comments");
				noTranscriptDiv.appendChild(document.createTextNode("This strip hasn't been transcribed yet."));
				that.transcriptDiv.appendChild(noTranscriptDiv);			
		}
	}

	this.build = function() {

		this.loadTranscript();

		var transcriptContainerDiv = document.createElement("div");
		transcriptContainerDiv.setAttribute("class", "transcript-container");
		transcriptContainerDiv.setAttribute("className", "transcript-container");
		transcriptContainerDiv.appendChild(this.transcriptDiv);
		
		return transcriptContainerDiv;
	}
}